<template>
  <div class="page has-navbar" v-nav="{ title: '直播大厅' }">
    <div class="page-content text-center">
      <!--
      <router-link class="button button-assertive" to="/videoRoom">
        <i class="ion-information-circled"></i> About
      </router-link> -->

      <main id="roomList">
        <p class="back-tip" v-if="videoList.length == 0">暂无直播</p>
        <div v-for="(item,index) in videoList" :key="index">
          <video-card :video-info="item"></video-card>
        </div>
        <nav>
          <div v-if="userInfo.role === 'live'" class="live-config" @click="liveConfig">
            <img src="http://p2ebqp10o.bkt.clouddn.com/liveConfig.png">
          </div>
          <div calss="my-info" @click="myInfo">
            <img src="http://p2ebqp10o.bkt.clouddn.com/me_128x128.png">
          </div>
        </nav>
      </main>

    </div>
  </div>
</template>
<script>
  import videoCard from 'components/video/videoCard.vue';
  import {
    mapGetters
  } from 'vuex';

  export default {
    components: {
      videoCard
    },
    data() {
      return {
        videoList: []
      }
    },
    methods: {
      myInfo() {
        this.$router.push({
          path: '/myInfo'
        })
      },
      liveConfig() {
        this.$router.push({
          path: '/liveConfig'
        })
      },
      //查询当前正在直播的直播间
      queryLiveVideoList() {
        this.$ajax.get('/video/query').then((res) => {
          if (res.code === 1) {
            this.videoList = res.data;
          }
        })
      }
    },
    mounted() {
      this.queryLiveVideoList();
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'videoInfo',
      ])
    },
  }

</script>
<style lang="scss">
  #roomList {
    width: 100vw;
    padding: 2%;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    p.back-tip {
      margin-top: 20%;
      font-size: .5rem;
      color: #ccc;
      width: 100%;
    }
    > div {
      width: 46%;
      margin-bottom: 2%;
      > img {
        width: 100%;
        height: calc(100% * 12 / 16);
      }
      p {
        text-align: center;
      }
    }
    // 菜单
    nav {
      position: fixed;
      bottom: 20px;
      right: 20px;
      div {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        text-align: center;
        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .2);
        line-height: 50px;
        img {
          width: 60%;
          padding-top: 20%;
        }
        &.live-config {
          margin-bottom: 10px;
        }
      }
    }
  }

</style>
